<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>二维码授权登录</title>
    <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../assets/style/admin.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../assets/layui/layui.js"></script>
    <script src="../assets/js/common.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            二维码授权登录
                        </div>
                        <div class="layui-card-body">
                            <div id="error"></div>
                            <div id="qrcode_block" style="position: relative;top:30%;left:30%;display: none;">
                                <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" id="loading" style="font-size:60px;"></i>
                                <div id="qrcode"></div>
                                <br>
                                <div id="msg"></div>
                                <div id="text"></div>
                                <br>
                                <div>
                                    <a class="layui-btn layui-btn-radius layui-btn-normal" href="../../code/wechat/add_by_qrcode.html" id="refresh" style="display: none;">刷新</a>
                                    &nbsp;
                                    <a class="layui-btn layui-btn-radius layui-btn-primary" href="index.html" id="back">返回</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var refresh = true;
        var sync;
        layui.use(['form'], function() {
            var $ = layui.$
                , layer = layui.layer
                , form = layui.form;
            sync = function () {
                var post = {
                    page: 1,
                    limit: 10
                };
                $.ajax({
                    type: "POST",
                    url: "/wechat/sync_qrcode/16787162",
                    data: post,
                    success: function (response) {
                        var qrcode = '';
                        var dataObj = $.parseJSON(response);
                        if (dataObj.data) {
                            var data = dataObj.data;
                            if (data.new_wechat_status) {
                                if (data.new_wechat_status == 1) {
                                    $('#qrcode').html('');
                                    $('#msg').html('正在获取二维码...');
                                    $('#text').html('');
                                    $('#qrcode_block').css('display', 'block');
                                } else if (data.new_wechat_status == 2) {
                                    $('#qrcode').html('');
                                    $('#msg').html('正在获取二维码...');
                                    $('#text').html('');
                                    $('#qrcode_block').css('display', 'block');
                                } else if (data.new_wechat_status == 3) {
                                    qrcode = '<img src="data:image/jpg;base64,'+data.new_wechat_qrcode+'" width="200px"/>';
                                    $('#qrcode').html(qrcode);
                                    $('#msg').html('');
                                    $('#text').html('请使用手机微信扫描二维码');
                                    $('#qrcode_block').css('display', 'block');
                                    $('#loading').css('display', 'none');
                                } else if (data.new_wechat_status == 4) {
                                    var wechatHead = '';
                                    if (data.new_wechat_info) {
                                        var wechatInfoObj = $.parseJSON(data.new_wechat_info);
                                        wechatHead = '<img src="'+wechatInfoObj.headImgUrl+'" width="80px"/>';
                                    }
                                    var displayText = '二维码已扫描，请在手机微信确认授权登录';
                                    if (data.new_wechat_qrcode) {
                                        qrcode = '<img src="data:image/jpg;base64,' + data.new_wechat_qrcode + '" width="200px"/>';
                                    } else {
                                        displayText = '请在手机微信确认授权登录';
                                    }
                                    $('#qrcode').html(qrcode);
                                    $('#msg').html('<span style="color: #00CC00;">'+(wechatHead ? wechatHead : '')+'&nbsp;&nbsp;'+displayText+'</span>');
                                    $('#text').html('');
                                    $('#qrcode_block').css('display', 'block');
                                    $('#loading').css('display', 'none');
                                } else if (data.new_wechat_status == 5 || data.new_wechat_status == 6) {
                                    $('#qrcode').html('');
                                    $('#msg').html('二维码已失效，请刷新页面重新获取');
                                    $('#text').html('');
                                    $('#qrcode_block').css('display', 'block');
                                    $('#loading').css('display', 'none');
                                    $('#refresh').css('display', 'inline-block');
                                    $('#back').css('display', 'none');
                                    refresh = false;
                                } else if (data.new_wechat_status == 7) {
                                    $('#qrcode').html('');
                                    $('#msg').html('<i class="layui-icon layui-icon-auz" style="font-size:40px;color: #00CC00;"></i>'+'授权成功，正在登录...');
                                    $('#text').html('');
                                    $('#qrcode_block').css('display', 'block');
                                    $('#loading').css('display', 'none');
                                    refresh = false;
                                    var targetUrl = '/wechat/index';
                                    if (data.wechat_id > 0 && data.is_grouped==false) {
                                        targetUrl = '/wechat/editGroup/'+data.wechat_id;
                                    }
                                    setTimeout(function () {
                                        window.location.href = targetUrl;
                                    }, 3000);
                                } else {
                                    refresh = false;
                                }
                            } else {
                                refresh = false;
                            }
                        } else {
                            refresh = false;
                            layer.msg(dataObj.msg, {offset: '45vh', icon: 5, time: 2000});
                        }
                    },
                    error: function (request, status, error) {

                    }
                });
            };

            var refresh_page = function () {
                sync();
                if (refresh) {
                    setTimeout(refresh_page, 1000);
                }
            };

            refresh_page();
        });

    </script>
</div>
</body>
</html>
